<template>
    <div class="home-scroll-bar">
        <div class="home-scroll-bar__swiper">
            <div ref="containerRef">
                <div class="swiper-item" v-for="(item,index) in props.data" :key="index">
                    <div class="scroll-bar__info" :class="`scroll-bar__info__${item.type}`">
                        <div>
                            <van-tag type="danger">{{ item.badge }}</van-tag> 
                        <span class="info_detail" v-html="item.detail"></span>
                        </div>
                        <van-tag plain type="primary">{{ item.btn }}</van-tag>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref,onMounted } from 'vue';
import  type { IScollBarInfo } from '@/types'
import { useInterval } from '@/use/useInterval';
interface IProps{
    intervalTime: number;
    transitionTime: number;
    height?: number;
    data:IScollBarInfo[]
}
const props = withDefaults(defineProps<IProps>(),{
    intervalTime: 3000,
    transitionTime: 300,
    height: 40,
});


const containerRef = ref();
const heightPx = `${props.height}px`;

// 生命周期加载页面
onMounted(()=>{
    const container = containerRef.value;
    const count = container.children.length;
    const firstSwiperItem = container.children[0];
    container.style.height = `${props.height}px`;
    let index = 0;
    useInterval(()=>{
        index = index === count - 1? 0 : index + 1;
        container.style.transform = `translateY(-${index * props.height}px)`;
        container.style.transition = `transform ${props.transitionTime}ms ease-in-out`;
        
    },props.intervalTime)

})


</script>

<style lang="scss" scoped>
.home-scroll-bar{
    // css变量
    --bean-color:rgb(252, 164, 40);
    --hongbao-color:rgb(255,68,25);
    .home-scroll-bar__swiper {
        background:#fff;
        border-radius:6px;
        margin:10px;
        font-size:13px;
        position: relative;
        overflow: hidden;
        height:v-bind(heightPx);
        .swiper-item{
            height:v-bind(heightPx);
        }
    }
    .scroll-bar__info{
        height: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info_detail{
            margin-left: 10px;
        }
    }
}
</style>











